<!--
 * @Author: 冯超
 * @Date: 2020-07-08 16:12:32
 * @LastEditors: 冯超
 * @LastEditTime: 2020-07-10 13:02:25
 * @Description: 文件说明
 * @FilePath: \vue-base\src\App.vue
-->
<template>
    <div id="app">
        <transition :name="transitionName">
            <navigation>
                <router-view class="router"/>
            </navigation>
        </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
            transitionName: 'van-slide-right'
        }
    },
    created() {
        this.$navigation.on('forward', () => {
            this.transitionName = 'van-slide-right'
        })
        this.$navigation.on('back', () => {
            this.transitionName = 'van-slide-left'
        })
    }
}
</script>

<style lang="less">
    * {
        box-sizing: border-box;
    }

    #app {
        font-family: PingFangSC-Regular;
        background-color: #f1f3f5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /** 解决路由切换动画上下闪动问题 */
    .router {
        /*position: absolute;*/
        /*top: safe-area-inset-top;*/
        /*top: env(safe-area-inset-top);*/
        /*width: 100%;*/
        /*transition: all 0.377s ease;*/
        /*backface-visibility: hidden;*/
    }
</style>
